<template>
<div>
  <back-page></back-page>
 <div class="mobileDetail">
    
    <div class="mobileTitle">
      {{ titleDetalles }}
    </div>
    <div class="mobileEditor">发布人：{{ editor }}</div>
    <div class="mobileEditor">发布时间：{{ timeDetalles }}</div>
    <div class="lineBorder"></div>
    <div v-html="contentDetalles"></div>
    <div class="lineBorder"></div>
    <div v-if="fileDocList.length > 0" class="showFileDoc">
      <div class="titleTextCss">附件：</div>
      <div class="lineFilecss" v-for="(item, idx) in fileDocList" :key="idx">
        <i class="el-icon-document"></i>
        <!-- <span class="fileTextCss" :title="item.name" @click="viewFile(item)">{{
          item.name
        }}</span>
        <span
          ><i
            class="el-icon-download fileIcon"
            @click="downloadFileFunc(item)"
          ></i
        ></span> -->
        <span class="fileTextCss" :title="item.name">{{
          item.name
        }}</span>
       
      </div>
    </div>
  </div>
</div>
 
</template>
<script>
import { getDetailMyMessage } from "@/api/custom/message";
import { ImagePreview } from "vant";
import { download } from '@/utils/index'
export default {
  data() {
    return {
      contentDetalles: "",
      titleDetalles: "",
      timeDetalles: "",
      editor: "",
      fileDocList: [],
    };
  },
  created() {
    let id = this.$route.query.id;
    getDetailMyMessage(id).then((res) => {
      if (res.code === 0) {
        this.contentDetalles = res.data.content;
        this.titleDetalles = res.data.title;
        this.timeDetalles = this.getDateTime(res.data.sendTime);
        this.editor = res.data.username;
        this.fileDocList = JSON.parse(res.data.allFileList) || [];
      }
    });
  },
  methods: {
    viewFile(item) {
      const nameSplitList = item.name.split(".");
      const type = nameSplitList[nameSplitList.length - 1];
      if (["jpeg", "jpg", "png"].includes(type)) {
        ImagePreview({
          images: [item.url],
          closeable: true,
        });
      } else if (["docx", "doc", "xlsx", "xls"].includes(type)) {
        let newFileUrl = encodeURIComponent(item.url);
        newFileUrl = "http://view.xdocin.com/xdoc?_xdoc=" + newFileUrl;
        window.open(newFileUrl, "_self");
      } else if (type === "pdf") {
      } else {
        this.$message.warning("当前文件不支持预览");
      }
    },
    downloadFileFunc (item) {
        download(item.url, item.name)
    },
        //时间戳转日期时间
    getDateTime(time) {
        if (!time) return ''
        let date = new Date(time)
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        let day = date.getDate()
        let hour = date.getHours()
        let minute = date.getMinutes()
        let second = date.getSeconds()
        return `${year}-${month<10?'0':''}${month}-${day<10?'0':''}${day} ${hour<10?'0':''}${hour}:${minute<10?'0':''}${minute}:${second<10?'0':''}${second}`
    },
  },
};
</script>

<style lang="scss" scoped>
.mobileDetail {
  padding: 0 15px;
  margin-top:10px;
  font-size: 14px;
  .mobileTitle {
    font-weight: bold;
    font-size: 16px;
  }
  .mobileEditor {
    margin: 15px 0;
    color: #8a909c;
  }
  .lineBorder {
    height: 0.5px;
    border-top: 1px solid #8a909c;
    margin-bottom: 15px;
  }
  .titleTextCss{
    font-size: 16px;
    margin-bottom: 5px;
}
.lineFilecss{
    padding: 3px 0;
}

.fileTextCss{
    cursor: pointer;
    width: 80%;
    padding: 0 10px;
    display: inline-block;
    vertical-align: text-bottom;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    &:hover {
        color: #409EFF;
    }
}
.fileIcon{
    padding: 0 5px;
    cursor: pointer;
    &:hover {
        color: #409EFF;
    }
}
}
</style>
